<template>
  <el-drawer
    v-model="localDrawer"
    direction="rtl"
    @close="handleClose"
    @open="handleOpen"
    append-to-body
    destroy-on-close
  >
    <template #header>
      <h4 v-if="localType === 'select'" class="text-lg font-bold">选择宿舍</h4>
      <h4 v-if="localType === 'cancel'" class="text-lg font-bold">退选宿舍</h4>
    </template>
    <template #default>
      <div v-loading="loading">
        <el-result
            v-if="localType === 'select'"
            title="确认吗"
            sub-title="请确认是否选择该宿舍？"
        >
          <template #icon>
            <div
                class="bg-blue-100 text-blue-600 dark:bg-blue-900 dark:text-blue-300 p-6 rounded-xl flex justify-center items-center text-3xl"
            >
              {{ localItemData.dNumber }}栋-{{ localItemData.rNumber }}号
            </div>
          </template>
        </el-result>
        <el-result
            v-if="localType === 'cancel'"
            title="确认吗"
            sub-title="请确认是否退选该宿舍？"
        >
          <template #icon>
            <div
                class="bg-red-100 text-red-600 dark:bg-red-900 dark:text-red-300 p-6 rounded-xl flex justify-center items-center text-3xl"
            >
              {{ localItemData.dNumber }}栋-{{ localItemData.rNumber }}号
            </div>
          </template>
        </el-result>
        <div class="mt-4">
          <h2 class="font-bold text-base mb-4">舍友信息</h2>
          <el-table :data="detailsData" style="width: 100%">
            <el-table-column prop="sName" label="姓名" />
            <el-table-column prop="sMajor" label="专业" />
          </el-table>
        </div>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button :disabled="loading" @click="cancelClick">取消</el-button>
        <el-button :disabled="loading" type="primary" @click="confirmClick">确认</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { ref, watch } from "vue";
import { ApiDormitory } from "@/core/api/index.js";
import Swal from "sweetalert2";
import _ from "lodash";

const loading = ref(false);
const props = defineProps({
  drawer: {
    type: Boolean,
    required: true,
  },
  itemData: {
    type: Object,
    required: true,
  },
  type: {
    type: String,
    required: true,
  },
});
const emit = defineEmits(["update:drawer", "refresh-list"]);
const localDrawer = ref(props.drawer);
const localItemData = ref(props.itemData);
const localType = ref(props.type);
const detailsData = ref([]);

watch(
  () => props.drawer,
  (newVal) => {
    localDrawer.value = newVal;
  }
);

watch(
  () => props.itemData,
  (newVal) => {
    localItemData.value = _.cloneDeep(newVal);
  },
  { deep: true }
);

watch(
  () => props.type,
  (newVal) => {
    localType.value = newVal;
  }
);

const handleClose = () => {
  emit("update:drawer", false);
};

const handleOpen = () => {
  getDormitoryDetails();
};

const getLabel = (field) => {
  const labels = {
    dNumber: "楼栋号",
    rNumber: "门牌号",
  };
  return labels[field];
};

const displayFields = ["dNumber", "rNumber"];

const getDormitoryDetails = async () => {
  const response = await ApiDormitory.getDormitoryDetails({
    dNumber: props.itemData.dNumber,
    rNumber: props.itemData.rNumber,
  });
  if (response.code == 0) {
    detailsData.value = response.data;
  }
};

const cancelClick = () => {
  emit("update:drawer", false);
};

const confirmClick = () => {
  if (localType.value === "select") {
    chooseDormitory();
  }
  if (localType.value === "cancel") {
    exitDormitory();
  }
};

const chooseDormitory = async () => {
  loading.value = true;
  const response = await ApiDormitory.chooseDormitory({
    rNumber: localItemData.value.rNumber,
    dNumber: localItemData.value.dNumber,
  });
  if (response.code == 0) {
    Swal.fire({
      title: "成功选择宿舍",
      text: `您已成功选择${localItemData.value.dNumber}栋${localItemData.value.rNumber}号宿舍`,
      icon: "success",
    });
    emit("refresh-list");
  }
  loading.value = false;
  emit("update:drawer", false);
};

const exitDormitory = async () => {
  loading.value = true;
  const response = await ApiDormitory.exitDormitory({
    rNumber: localItemData.value.rNumber,
    dNumber: localItemData.value.dNumber,
  });
  if (response.code == 0) {
    Swal.fire({
      title: "成功退选宿舍",
      text: `您已成功退选${localItemData.value.dNumber}栋${localItemData.value.rNumber}号宿舍`,
      icon: "success",
    });
    emit("refresh-list");
  }
  loading.value = false;
  emit("update:drawer", false);
};
</script>
